<template>
  <div class="page" :style="{background: 'url('+bgUrl+')  0 / cover fixed '}">
    <b-container fluid>
        <b-row>
            <b-col cols="3" class="left-section">
              <div class="logo">logo</div>

              <b-list-group class="mb-24 left-links">
                <b-list-group-item href="#">流行书签</b-list-group-item>
                <b-list-group-item href="#">我的最爱</b-list-group-item>
              </b-list-group>

              <b-list-group class="types mb-24">
                <b-list-group-item  
                  class="type d-flex justify-content-between align-items-center" 
                  v-for="(item,i) in types" 
                  :key="item._id"
                  @click="selectType(i,item)"
                  :class="{'active':i==typeIndex}"
                  >{{item.type}} <b-badge variant="primary" pill>{{item.count}}</b-badge>
                </b-list-group-item>
              </b-list-group>

              <b-button variant="primary" size="sm" v-b-modal.add-type>新增类型</b-button>

            </b-col>
            <!-- left-section end -->

            <b-col class="right-section">

              <b-row class="header">
                <b-col cols="4">
                  <b-input-group size="lg">
                    <b-form-input v-model="searchText"></b-form-input>
                    <b-input-group-append>
                      <b-button variant="" @click="search">搜索</b-button>
                    </b-input-group-append>
                  </b-input-group>
                </b-col>

                <b-col class="d-flex justify-content-end align-items-center">
                  <b-icon-image @click="changeBG"></b-icon-image>
                  <div class="logout" @click="logout">注销</div>
                </b-col>
              </b-row>

              <b-row class="content-header">
                <b-col>
                  
                </b-col>
              </b-row>

               
                  <b-row class="bookmark" align-v="center" v-for="(item,index) in bookmarks" :key="item._id + index">
                    <b-col cols="9" @click="bookmarkClick(item)" style="cursor:pointer">
                      <b-row align-v="center">
                        <b-col class="d-flex align-items-center"  cols="1">
                          <b-img class="bookmark-logo" :src="`https://api.uomg.com/api/get.favicon?url=${item.link}`" fluid alt="Responsive image"></b-img>
                        </b-col>
                        <b-col>
                          <div class="title">{{ item.title}}</div>
                          <div class="introduce">{{ item.introduce}}</div>
                        </b-col>
                         </b-row>
                      </b-col>
                      
                      <b-col class="tools">
                        <b-button variant="primary" @click="editBookmark(item)" v-b-modal.edit-bookmark>编辑</b-button>
                        <b-button variant="dark" @click="delBookmark(item)">删除</b-button>
                      </b-col>

                  </b-row>
                  
             

              <div class="addBtn"  v-b-modal.add-bookmark>+</div>
            </b-col>
            <!-- right-section end -->
        </b-row>
    </b-container>

    <b-modal id="add-type" centered title="新增类型" @ok="addType">
      <b-input-group prepend="类型" >
        <b-form-input v-model="addTypeForm.type" placeholder="类型名称"></b-form-input>
      </b-input-group>
    </b-modal>

    <b-modal id="add-bookmark"  title="新增书签" centered cancel-title="取消" ok-title="确认" @ok="addBookmarkOk">
      <b-input-group class="mb-24" prepend="书签链接" >
        <b-form-input v-model="addBookmarkForm.link" @change="linkChange"  debounce="1000" placeholder="书签链接"></b-form-input>
      </b-input-group>
      <b-input-group class="mb-24" prepend="书签标题" >
        <b-form-input v-model="addBookmarkForm.title" placeholder="书签标题"></b-form-input>
      </b-input-group>
      <b-input-group class="mb-24" prepend="书签简介" >
        <b-form-input v-model="addBookmarkForm.introduce" placeholder="书签简介"></b-form-input>
      </b-input-group>
       <b-form-select v-model="typeId" :options="types" value-field="_id" text-field="type"></b-form-select>
    </b-modal>

    <b-modal id="edit-bookmark"  title="编辑书签" centered  @ok="editBookmarkOk">
      <b-input-group class="mb-24" prepend="书签链接" >
        <b-form-input v-model="editBookmarkForm.link" placeholder="书签链接"></b-form-input>
      </b-input-group>
      <b-input-group class="mb-24" prepend="书签标题" >
        <b-form-input v-model="editBookmarkForm.title" placeholder="书签标题"></b-form-input>
      </b-input-group>
      <b-input-group class="mb-24" prepend="书签简介" >
        <b-form-input v-model="editBookmarkForm.introduce" placeholder="书签简介"></b-form-input>
      </b-input-group>
       <b-form-select v-model="editBookmarkForm.typeId" :options="types" value-field="_id" text-field="type"></b-form-select>
    </b-modal>

  </div>
</template>

<script>

export default {
  name: "Login",
  data: function () {
    return {
      bgUrl:'http://oss.img.min.chat/2021/07/26/f883de6b23521.jpg',
      searchText:'',
      addTypeForm:{
        type:"",
        count:0,
        uid:null
      },
      userUID:null,
      types:[],
      typeIndex:0,
      typeId:'',
      bookmarks:[],
      addBookmarkForm:{
        link:'',
        title:'',
        introduce:'',
        uid:null,
        clickNum:0,
        typeId:null,
      },
      editBookmarkForm:{},

    };
  },
  created() {
    let user = JSON.parse(window.sessionStorage.getItem("user"));
    this.userUID = user.uid;
    this.handleGetTypes();
    // this.$loading.show();
    // this.$loading.close();
  },
  methods: {
    handleGetTypes(){
      this.$cloudbase.callFunction({
        name:'getTypes',
        data:{userUID:this.userUID}
      }).then(res=>{
        this.$loading.close();
         console.log('handleGetTypes res',res);
        this.types = res.result.data;
        if(this.types[this.typeIndex]){
          this.selectType(this.typeIndex,this.types[this.typeIndex])
        }
        console.log('this.types',this.types);
      }).catch(err=>{
        console.log('err',err);
      })
    },
    handleGetBookmarks(){
      this.$cloudbase.callFunction({
        name:'getBookmarks',
        data:{userUID:this.userUID,typeId:this.typeId}
      }).then(res=>{
         console.log('handleGetBookmarks res',res);
        this.bookmarks = res.result.data;
        // console.log('this.bookmarks',this.bookmarks);
      }).catch(err=>{
        console.log('err',err);
      })
    },
    addType(){
      this.addTypeForm.uid = this.userUID;     
      this.$bvModal.msgBoxConfirm('Are you sure?')
      .then(res => {
        if(!res){return}
        if(!this.addTypeForm.type){alert('填类型名称啊哥');return}
        this.$cloudbase.callFunction({
          name:"addType",
          data:this.addTypeForm
        }).then(res=>{
          this.handleGetTypes();
          console.log('addType res',res); 
        }).catch(err=>{
          console.log('err',err);
        });
         console.log('res',res);
      })
      .catch(err => {
        console.log('err',err);
      });
    },
    selectType(i,type){
        this.typeIndex = i;
        this.typeId = type._id;
        this.handleGetBookmarks();
        console.log('selectType',type);
    },
    addBookmarkOk(){
    console.log('this.$bvModal',this.$bvModal)
    this.$bvModal.msgBoxConfirm('Are you sure?')
      .then(res => {
        if(!res){return}
        if(!this.addBookmarkForm.link){alert('填啊哥');return}
        this.addBookmarkForm.uid = this.userUID;
        this.addBookmarkForm.typeId = this.typeId; 
        this.$cloudbase.callFunction({
          name:"addBookmark",
          data:this.addBookmarkForm
        }).then(res=>{
          this.handleGetBookmarks();
          this.handleGetTypes();
          console.log('addBookmarkOk res',res); 
        }).catch(err=>{
          console.log('err',err);
        });
         console.log('res',res);
      })
      .catch(err => {
        console.log('err',err);
      });
  },
  bookmarkClick(bookmark){
    console.log('bookmark',bookmark);
    window.open(bookmark.link,'_blank');
    this.$cloudbase.callFunction({
        name:"updateClickNum",
        data:{markId:bookmark._id,clickNum:bookmark.clickNum + 1}
      }).then(res=>{
        this.handleGetBookmarks();
        console.log('bookmarkClick res',res); 
      }).catch(err=>{
        console.log('err',err);
    });
  },
  editBookmark(bookmark){     
    this.editBookmarkForm = bookmark;
    this.editBookmarkForm.OldTypeId = bookmark.typeId;
    console.log('bookmark',bookmark);
  },
  editBookmarkOk(){    
    if(!this.editBookmarkForm.link){alert('填啊哥');return}
      this.$cloudbase.callFunction({
        name:"editBookmark",
        data:this.editBookmarkForm
      }).then(res=>{
        this.handleGetBookmarks();
         this.handleGetTypes();
        console.log('editBookmarkOk res',res); 
      }).catch(err=>{
        console.log('err',err);
    });
  },
  delBookmark(bookmark){
    console.log('bookmark',bookmark);
    this.$bvModal.msgBoxConfirm('Are you sure?')
      .then(res => {
        if(!res){return}
        this.$cloudbase.callFunction({
          name:"delBookmark",
          data:{bookmarkId:bookmark._id,typeId:bookmark.typeId}
        }).then(res=>{
          this.handleGetBookmarks();
          this.handleGetTypes();
          console.log('delBookmark res',res); 
        }).catch(err=>{
          console.log('err',err);
        });
         console.log('res',res);
      })
      .catch(err => {
        console.log('err',err);
      });
  },
  linkChange(){
    this.$loading.show();
    this.$cloudbase.callFunction({
        name:"getUrlInfo",
        data:{url:this.addBookmarkForm.link}
      }).then(res=>{
        this.$loading.close()
        this.addBookmarkForm.title = res.result.data.title;
        this.addBookmarkForm.introduce = res.result.data.description;
        console.log('res.result.data res',res.result.data); 
        console.log('linkChange res',res); 
      }).catch(err=>{
        this.$loading.close()
        console.log('err',err);
    });
  },
  search(){
    this.$loading.show();
    this.$cloudbase.callFunction({
        name:"bookmarkSearch",
        data:{userUID:this.userUID,searchText:this.searchText}
      }).then(res=>{
        this.$loading.close()
        this.bookmarks = res.result.data;
        console.log('search res',res); 
      }).catch(err=>{
        this.$loading.close()
        console.log('err',err);
    });
  },
  changeBG(){
    let that = this;
    // fetch('https://api.vvhan.com/api/acgimg?type=json')
    fetch('https://api.momen.vip/getRandomImg')
    .then(function(response) {
      return response.json();
    })
    .then(function(myJson) {
      console.log('myJson.data',myJson);
      that.bgUrl = myJson.imgurl;
    });
  },
  logout(){
     window.sessionStorage.clear();
    this.$router.push({
      path: "/",
    });
  }

  },
  
};
</script>
<style scoped>
  @import url('./home.css');
</style>